import React,{ Component } from 'react';
import { TouchableOpacity, Image } from 'react-native';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator } from 'react-navigation';
import MineScreen from './pages/Mine';
import ReportScreen from './pages/Report';
import PresentationScreen from './pages/Presentation';
import TrackScreen from './pages/Track';

import NavigationService from './common/NavigationService';
import ReportDetail from './components/Report/ReportDetail';
import AuthLoadingScreen from './components/Login/AuthLoadingScreen';
import SignInScreen from './components/Login/SignInScreen';
import TrackIndexScreen from './components/Track/TrackIndex';
import Constants from './common/Constants';
import NetMaintainFirstStepScreen from './components/Track/NetMaintainFirstStep';
import NetMaintainSecondStepScreen from './components/Track/NetMaintainSecondStep';
import NetMaintainThirdStepScreen from './components/Track/NetMaintainThirdStep';
import NetMaintainFinalStepScreen from './components/Track/NetMaintainFinalStep';
import CreateActivityScreen from './components/Track/CreateActivity';

global.Constants = Constants;

const TopBottomNavigator = createBottomTabNavigator({
	Mine: {
		screen : MineScreen,
		navigationOptions : {
			title:"我的",
			tabBarButtonComponent: TouchableOpacity,
			tabBarIcon:({focused,tintColor}) => {
				const Icon = focused?(<Image
					   style={{width:22,height:22}}
					   color={tintColor}
					   source={require('./assets/images/tabBarIconActive_01.png')}
					   ></Image>):(<Image
					   style={{width:22,height:22}}
					   color={tintColor}
					   source={require('./assets/images/tabBarIcon_01.png')}
					   ></Image>)
				return Icon
			}
		}
	},
	Report: {
		screen : ReportScreen,
		navigationOptions : {
			title:"报表",
			tabBarButtonComponent: TouchableOpacity,
			tabBarIcon:({focused,tintColor}) => {
				const Icon = focused?(<Image
					   style={{width:22,height:22}}
					   color={tintColor}
					   source={require('./assets/images/tabBarIconActive_02.png')}
					   ></Image>):(<Image
					   style={{width:22,height:22}}
					   color={tintColor}
					   source={require('./assets/images/tabBarIcon_02.png')}
					   ></Image>)
				return Icon
			}
		}
	},
	Presentation: {
		screen : PresentationScreen,
		navigationOptions : {
			title:"报告",
			tabBarButtonComponent: TouchableOpacity,
			tabBarIcon:({focused,tintColor}) => {
				const Icon = focused?(<Image
					   style={{width:22,height:22}}
					   color={tintColor}
					   source={require('./assets/images/tabBarIconActive_03.png')}
					   ></Image>):(<Image
					   style={{width:22,height:22}}
					   color={tintColor}
					   source={require('./assets/images/tabBarIcon_03.png')}
					   ></Image>)
				return Icon
			}
		}
	},
	Track:{
		screen : TrackScreen,
		navigationOptions : {
			title:"维系",
			tabBarButtonComponent: TouchableOpacity,
			tabBarIcon:({focused,tintColor}) => {
				const Icon = focused?(<Image
					   style={{width:22,height:22}}
					   color={tintColor}
					   source={require('./assets/images/tabBarIconActive_04.png')}
					   ></Image>):(<Image
					   style={{width:22,height:22}}
					   color={tintColor}
					   source={require('./assets/images/tabBarIcon_04.png')}
					   ></Image>)
				return Icon
			}
		}
	}
},{
	initialRouteName:'Mine',//页面初始化时加载的页面
	order:['Mine','Report','Presentation','Track'],//页面初始化时选项卡的顺序
	tabBarOptions:{
		activeTintColor:'#f54545',
		inactiveTintColor:'#808080',
		style:{
			backgroundColor:'#fff',
			borderTopWidth:1,
			borderTopColor:'#f0f0f0'
		},
		labelStyle:{
			fontSize:12
		}
	}
});

const MaintainNavigator = createStackNavigator({
			NetMaintainFirstStep: {
				screen: NetMaintainFirstStepScreen
			},
			NetMaintainSecondStep: {
				screen: NetMaintainSecondStepScreen
			},
			NetMaintainThirdStep: {
				screen: NetMaintainThirdStepScreen
			},
			NetMaintainFinalStep: {
				screen: NetMaintainFinalStepScreen
			},
			CreateActivity: {
				screen : CreateActivityScreen
			}
		},{
			initialRouteName:'NetMaintainFirstStep',
			header:null,
			navigationOptions:{
				headerStyle:{
					backgroundColor:'#f54545',
					borderBottomWidth:0,
					shadowOpacity:0
				},
				headerTitleStyle:{
					fontSize:18,
					color:'#fff'
				},
				headerTintColor:'#fff'
			}
	})

const TopLevelNavigator = createStackNavigator(
	{
		TopBottom : {
			screen:TopBottomNavigator,
			navigationOptions:{
				header:null
			}
		},
	 	ReportDetail : ReportDetail,
	 	TrackIndex : TrackIndexScreen,
	 	MainTainPage : {
			screen:MaintainNavigator,
			navigationOptions:{
				header:null
			}
		}
	},{
		initialRouteName:'TopBottom'
	}
);

const LoginNavigator = createSwitchNavigator(
	{
		AuthLoading: AuthLoadingScreen,
		Auth: SignInScreen,
		App: TopLevelNavigator,
	},
	{
		initialRouteName: 'AuthLoading',
	}
);

export default class App extends React.Component {
  render() {
    return (
      <LoginNavigator
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
      />
    );
  }
}
